<template>
  <div class="accountDetail">
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('goBack')" ></jxf-titletip>
    <el-card class="box-card mt20 jxf-table">
      <div slot="header">
        <span>
          数据列表
        </span>
      </div>
      <jxf-table :table="billDetailTable">
        <template slot="finalAmount" slot-scope="order">
          {{order.row.finalAmount ? formatMoney.twoDecimal(order.row.finalAmount) : ""}}
        </template>
        <template slot="payTime" slot-scope="order">
          {{order.row.payTime ? FormatDate.timeFormat(order.row.payTime) : ""}}
        </template>
        <template slot="status" slot-scope="order">
          <div v-if="order.row.status === 0">已完成</div>
          <div v-if="order.row.status === 1">待付款</div>
          <div v-if="order.row.status === 2">待接单</div>
          <div v-if="order.row.status === 3">待发货</div>
          <div v-if="order.row.status === 4">待收货</div>
          <div v-if="order.row.status === 6">已关闭</div>
          <div v-if="order.row.status === 7">已关闭</div>
          <div v-if="order.row.status === 8">已关闭</div>
          <div v-if="order.row.status === 9">已关闭</div>
          <div v-if="order.row.status === 10">已关闭</div>
          <div v-if="order.row.status === 11">已关闭</div>
        </template>
        <template slot="orderNo" slot-scope="order">
          <a href="javascript:void(0)" @click="toOrderList(order.row.orderNo)">{{order.row.orderNo}}</a>
        </template>
      </jxf-table>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </el-card>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import formatDate from '@/assets/js/formatDate'
  export default {
    name: "AccountDetail",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        title: "账单明细",
        formatMoney: formatMoney,
        FormatDate: formatDate,
        billDetailTable: {
          border: true,
          loading: false,
          tr: [
            {
              id: '1',
              label: '交易订单号',
              minWidth: 100,
              show: 'template',
              prop: 'orderNo'
            }, {
              id: '2',
              label: '订单应付金额',
              prop: 'finalAmount',
              show: 'template',
            }, {
              id: '3',
              label: '订单状态',
              prop: 'status',
              show: 'template',
            }, {
              id: '4',
              minWidth: 120,
              label: '订单支付时间',
              prop: 'payTime',
              show: 'template',
            }
          ],
          data: []
        },
        pageTotal: 0,
        pageSize: 10,
        currentPage: 1,
      }
    },
    methods: {
      getData() {
        this.billDetailTable.loading = true
        let data = {
          billId: this.dataInfo.billId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.post(apis.factory.getBillDetail, data).then(res => {
          if(res.code === "10000000") {
            this.billDetailTable.data = res.data && res.data.dataList ? res.data.dataList : []
            this.pageTotal = res.data.total;
          } else {
            this.$message.error(res.message)
          }
          this.billDetailTable.loading = false;
        })
      },
      toOrderList(orderNo) {
        this.$router.push({name: 'orderList',params:{ orderNo: orderNo}});
      },
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
    },
    created() {
      this.getData()
    }
  }
</script>

<style lang="scss">
  .accountDetail {
    a {
      color: #409EFF;
      text-decoration: underline!important;
    }
  }
</style>
